<template>
    <section>
        <el-col :span="12">
            <el-form :model="editForm" :rules="editRules" ref="editForm">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="单位" prop="unit">
                    <el-input v-model="editForm.unit"></el-input>
                </el-form-item>
                <el-form-item label="每单位重量（公斤）" prop="weights">
                    <el-input type="number" v-model.number="editForm.weights"></el-input>
                </el-form-item>
                <el-form-item label="主图" class="PicCategories">
                    <el-upload action="//jsonplaceholder.typicode.com/posts/" :thumbnail-mode="true" type="drag" :on-preview="handlePreview"
                        :on-success="handSuccess">
                        <i class="el-icon-upload"></i>
                        <div class="el-dragger__text"><em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                </el-form-item>
                <el-form-item label="主图" class="PicCategories">
                    <el-upload action="//jsonplaceholder.typicode.com/posts/" :thumbnail-mode="true" type="drag" :on-preview="handlePreview"
                        :on-success="handSuccess">
                        <i class="el-icon-upload"></i>
                        <div class="el-dragger__text"><em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                </el-form-item>
                <el-form-item label="内容" prop="contents">
                    <el-input type="textarea" :rows="5" v-model="editForm.contents"></el-input>
                </el-form-item>
                <el-form-item label="分类" prop="categories">
                    <el-select v-model="editForm.categories" placeholder="请选择">
                        <el-option v-for="item in editForm.options" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选项" class="PicCategories">
                    <el-select v-model="editForm.Options" multiple placeholder="请选择">
                        <el-option v-for="item in editForm.options" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-col>

        <el-col :span="24" style="margin-bottom: 10px;">
            <el-button type="primary" @click="submitForm('editForm')">更新商品</el-button>
            <el-button style="float:right;" @click="ruleFormBack">返回</el-button>
        </el-col>
        <el-dialog title="预览" v-model="previewVisible">
            <img :src="previewImageUrl" v-if="previewVisible" style="width: 100%">
        </el-dialog>
    </section>
</template>
<script>
    export default {
        data() {
            return {
                imgName: '',
                visible: false,
                previewVisible: false,
                previewImageUrl: "",
                editForm: {
                    name: '',
                    unit: '',
                    weights: '',
                    contents: '',
                    categories: '',
                    Options: '',
                    options: [{
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }]
                },
                editRules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur change' },
                    ],
                    unit: [
                        { required: true, message: '请输入单位', trigger: 'blur change' }
                    ],
                    weights: [
                        { required: true, message: '请输入没单位重量（公斤）' }
                    ],
                    contents: [
                        { required: true, message: '请输入内容', trigger: 'change blur' }
                    ],
                    categories: [
                        { required: true, message: '请选择分类', trigger: 'change' }
                    ],
                    resource: [
                        { required: true, message: '请选择活动资源', trigger: 'change' }
                    ],
                    region: [
                        { required: true, message: '请填写活动形式', trigger: 'blur' }
                    ]
                },
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            ruleFormBack() {
                this.$router.push(`/products`);
            },
            handlePreview(file) {
                this.previewImageUrl = file.url;
                this.previewVisible = true;
            },
            handSuccess(response, file, fileList) {
                fileList.length = 0;
                fileList.push(file);
            },
            handleView(name) {
                this.imgName = name;
                this.visible = true;
            },
        }
    }

</script>